<template>
  <div class="box">
    <div id="" style="margin-bottom: 20px;">
      <el-button :type="type=='数据分类配置'?'primary':''" v-has @click="type='数据分类配置'">数据分类配置</el-button>
      <el-button :type="type=='数据分层配置'?'primary':''" v-has @click="type='数据分层配置'">数据分层配置</el-button>
      <el-button :type="type=='授权审批管理'?'primary':''" v-has @click="type='授权审批管理'">授权审批管理</el-button>
    </div>
<!--    <div v-if="type=='数据分层配置'" style="margin-bottom:20px;">
      <el-button type="primary">新增</el-button>
    </div> -->
    <template v-if="type=='数据分类配置'">
      <el-button type="primary" style="margin-bottom:20px;" @click="addVisible=true">添加</el-button>
      <el-table ref="multipleTable" :data="tableData1" border tooltip-effect="dark" fit stripe highlight-current-row>
        <el-table-column type="selection"></el-table-column>
        <el-table-column v-for="item in tableHead1" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper1'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="primary" size="mini" @click="editVisible=true,row=scope.row">修改</el-button>
              <el-button type="primary" size="mini">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type=='数据分层配置'">
      <el-table ref="multipleTable" :data="tableData2" border tooltip-effect="dark" fit stripe highlight-current-row>
        <el-table-column type="selection"></el-table-column>
        <el-table-column v-for="item in tableHead2" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper2'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="primary" size="mini">明细查询</el-button>
              <el-button type="primary" size="mini">明细统计</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type=='授权审批管理'">
      <el-table ref="multipleTable" :data="tableData3" border tooltip-effect="dark" fit stripe highlight-current-row>
        <el-table-column type="selection"></el-table-column>
        <el-table-column v-for="item in tableHead3" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper3'&&item.title!='status'">
              {{scope.row[item.title]}}
            </div>
            <div v-else-if="item.title=='status'">
              <el-button type="primary" v-if="scope.row[item.title]=='未审核'" @click="agree(scope.$index)">同意
              </el-button>
              <el-button type="danger" v-if="scope.row[item.title]=='未审核'" @click="reject(scope.$index)">拒绝
              </el-button>
              <el-button v-if="scope.row[item.title]!='未审核'">已审核</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="addVisible">
      <el-dialog title="新增数据分类" :close-on-click-modal="false" :visible.sync="addVisible" width="20%">
        <add @close="close" @dataClassify="dataClassify" />
      </el-dialog>
    </template>
    <template v-if="editVisible">
      <el-dialog title="修改数据分类" :close-on-click-modal="false" :visible.sync="editVisible" width="20%">
        <edit @close="close" :row="row" @dataClassify="dataClassify" />
      </el-dialog>
    </template>
  </div>
</template>

<script>
  import add from "./components/add.vue"
  import edit from "./components/edit.vue"
  export default {
    components: {
      add,
      edit
    },
    data() {
      return {
        row: {},
        addVisible: false,
        editVisible: false,
        ruleForm: {},
        formData: {},
        ruleForm1: {},
        formData1: {},
        ruleForm2: {},
        formData2: {},
        fileList: [],
        type: '数据导入',
        tableHead1: [{
            id: 1,
            label: "数据分类",
            title: "dataType",
          },
          {
            id: 5,
            label: "操作",
            title: "oper1",
          }
        ],
        tableData1: [{
            dataType: "安全事件",
            oper1: ''
          },
          {
            dataType: "威胁情报",
            oper1: ''
          },
          {
            dataType: "资产",
            oper1: ''
          },
          {
            dataType: "应急工具",
            oper1: ''
          },
          {
            dataType: "安全事件一",
            oper1: ''
          }
        ],

        formData: {},

        tableHead2: [{
            id: 1,
            label: "级别",
            title: "level",
          },
          {
            id: 2,
            label: "排序",
            title: "sort",
          }
        ],
        tableData2: [{
            level: "一级",
            sort: '1'
          },
          {
            level: "二级",
            sort: '2'
          },
          {
            level: "三级",
            sort: '3'
          }
        ],
        tableHead3: [{
            id: 1,
            label: "审批内容",
            title: "eaContent",
          },
          {
            id: 3,
            label: "审核备注",
            title: "note",
          },
          {
            id: 2,
            label: "审核状态",
            title: "status",
          },
        ],
        tableData3: [{
            eaContent: "WS001服务开通",
            status: '未审核',
            note: ''
          },
          {
            eaContent: "WS002服务开通",
            status: '审核通过',
            note: '经核实，已授权'
          }
        ]

      };
    },
    mounted() {
      this.dataClassify()
    },
    computed: {
      uploadFile() {
        return process.env.VUE_APP_BASE_API + "/dc/importCustomer";
      },
      headers() {
        const head = {
          token: this.$store.getters.token,
        };
        return head;
      },
    },
    methods: {
      submitForm() {
        this.$message({
          type: "success",
          message: '上传目录成功'
        })
      },
      resetForm() {

      },
      close() {
        this.addVisible = false
        this.editVisible = false
      },
      dataClassify() {
        this.$server.dataClassify().then((res) => {
          console.log(res)
          this.tableData1 = res.page.list
        })
      },
      agree(index) {
        console.log(index)
        this.tableData3[index].status = '审核通过'
        this.tableData3[index].note = '经核实，已授权'
      },
      reject(index) {
        console.log(index)
        this.tableData3[index].status = '已拒绝'
        this.tableData3[index].note = '经审核，不通过'
      }
    }
  }
</script>

<style lang="scss" scoped>
  .box {
    padding: 30px;
  }
</style>
